<script setup lang="ts">
defineOptions({
  name: '',
});

const formData = reactive({
  minSize: 25,
  size: 75,
  direction: 'vertical',
  resizable: true,
  withHandler: true,
  hideLine: false,
  hideHandler: false,
  hideTooltip: true,
});
const formData2 = reactive({
  ...formData,
  direction: 'horizontal',
  size: 50,
});
</script>

<template>
  <AppPage>
    <SplitPanel v-bind="formData">
      <template #panel>
        <PageCard title="Panel Slot" shadow="hover">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aliquid dolores, itaque ullam neque
          excepturi minus tenetur, eveniet omnis nihil architecto? Voluptas quo dolorum necessitatibus doloremque quia
          veritatis, corrupti praesentium?
        </PageCard>
      </template>
      <SplitPanel v-bind="formData2">
        <template #panel>
          <PageCard title="Props" shadow="hover">
            <el-form :model="formData" label-width="100">
              <ResponsiveRow>
                <el-form-item label="最小比例">
                  <template #label>
                    <div class="flex-y-center">
                      最小比例
                      <el-tooltip content="最小比例会作用到 panel、default 两个插槽" placement="top">
                        <el-icon class="ml-1"><QuestionFilled /></el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                  <el-slider v-model="formData.minSize" />
                </el-form-item>
                <el-form-item label="默认比例">
                  <template #label>
                    <div class="flex-y-center">
                      默认比例
                      <el-tooltip content="默认比例会作用到默认插槽" placement="top">
                        <el-icon class="ml-1"><QuestionFilled /></el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                  <el-slider v-model="formData.size" />
                </el-form-item>
                <el-form-item label="方向">
                  <el-segmented v-model="formData.direction" :options="['vertical', 'horizontal']" />
                </el-form-item>
                <el-form-item label="可调节">
                  <el-switch v-model="formData.resizable" />
                </el-form-item>
                <el-form-item label="隐藏分隔线">
                  <el-switch v-model="formData.hideLine" />
                </el-form-item>
                <el-form-item label="隐藏分隔手柄">
                  <el-switch v-model="formData.hideHandler" />
                </el-form-item>
                <el-form-item label="隐藏比例">
                  <el-switch v-model="formData.hideTooltip" />
                </el-form-item>
                <el-form-item label="显示分割器">
                  <template #label>
                    <div class="flex-y-center">
                      显示分割器
                      <el-tooltip content="关闭则不显示分割器、不可调节" placement="top">
                        <el-icon class="ml-1"><QuestionFilled /></el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                  <el-switch v-model="formData.withHandler" />
                </el-form-item>
                <el-form-item label="分割器">
                  <div class="flex-y-center">
                    <el-tooltip content="双击分割器可快速恢复到默认比例" placement="top">
                      <el-icon class="ml-1"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </div>
                </el-form-item>
              </ResponsiveRow>
            </el-form>
          </PageCard>
        </template>
        <PageCard title="Default Slot" shadow="hover">
          <el-form :model="formData2" label-width="100">
            <ResponsiveRow>
              <el-form-item label="最小比例">
                <template #label>
                  <div class="flex-y-center">
                    最小比例
                    <el-tooltip content="最小比例会作用到 panel、default 两个插槽" placement="top">
                      <el-icon class="ml-1"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <el-slider v-model="formData2.minSize" />
              </el-form-item>
              <el-form-item label="默认比例">
                <template #label>
                  <div class="flex-y-center">
                    默认比例
                    <el-tooltip content="默认比例会作用到默认插槽" placement="top">
                      <el-icon class="ml-1"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <el-slider v-model="formData2.size" />
              </el-form-item>
              <el-form-item label="方向">
                <el-segmented v-model="formData2.direction" :options="['vertical', 'horizontal']" />
              </el-form-item>
              <el-form-item label="可调节">
                <el-switch v-model="formData2.resizable" />
              </el-form-item>
              <el-form-item label="隐藏分隔线">
                <el-switch v-model="formData2.hideLine" />
              </el-form-item>
              <el-form-item label="隐藏分隔手柄">
                <el-switch v-model="formData2.hideHandler" />
              </el-form-item>
              <el-form-item label="隐藏比例">
                <el-switch v-model="formData2.hideTooltip" />
              </el-form-item>
              <el-form-item label="显示分割器">
                <template #label>
                  <div class="flex-y-center">
                    显示分割器
                    <el-tooltip content="关闭则不显示分割器、不可调节" placement="top">
                      <el-icon class="ml-1"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <el-switch v-model="formData2.withHandler" />
              </el-form-item>
              <el-form-item label="分割器">
                <div class="flex-y-center">
                  <el-tooltip content="双击分割器可快速恢复到默认比例" placement="top">
                    <el-icon class="ml-1"><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </el-form-item>
            </ResponsiveRow>
          </el-form>
        </PageCard>
      </SplitPanel>
    </SplitPanel>
  </AppPage>
</template>
